import * as React from 'react';
import './index.scss';

export interface SvgIconProps {
  name: string;
  color?: string;
  stroke?: string;
  hoverColor?: string;
  hoverStroke?: string;
  className?: string;
  size?: number | string;
  width?: number | string;
  height?: number | string;
  style?: Obj;
  clickCallback?: Fn;
}

const SvgIcon = (props: SvgIconProps) => {
  const {
    name,
    color,
    stroke = 'none',
    size = 30,
    width,
    height,
    className = '',
    style,
    clickCallback,
    hoverColor,
    hoverStroke,
  } = props;

  return (
    <div
      className={`svg-icon-wrapper ${hoverColor || hoverStroke ? 'enable-toggle-color' : ''}`}
      style={{ width: width || size, height: height || size }}
    >
      <svg
        aria-hidden="true"
        width={width || size}
        {...(height === 'auto' ? {} : { height: height || size })}
        fill={color}
        className={'icon ' + `icon-${name} ` + className}
        style={{ ...style }}
        onClick={() => {
          clickCallback?.();
        }}
      >
        <use href={'#icon-' + name} fill={color} stroke={stroke} />
      </svg>
      {(hoverColor || hoverStroke) && (
        <svg
          aria-hidden="true"
          width={width || size}
          {...(height === 'auto' ? {} : { height: height || size })}
          fill={hoverColor || color}
          className={'hover-icon icon ' + `icon-${name} ` + className}
          style={{ ...style }}
          onClick={() => {
            clickCallback?.();
          }}
        >
          <use
            href={'#icon-' + name}
            fill={hoverColor || color}
            stroke={hoverStroke || stroke}
          />
        </svg>
      )}
    </div>
  );
};
export default SvgIcon;
